<template>
    <div class="type">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">题材</mt-tab-item>
            <mt-tab-item id="2">进度</mt-tab-item>
            <mt-tab-item id="3">受众</mt-tab-item>
            <mt-tab-item id="4">属性</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img1.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img2.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img3.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img4.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img5.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img6.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img7.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img8.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img9.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img10.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img11.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img12.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img13.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img14.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img15.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img16.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img17.png" alt=""></div></router-link>
                    <div class="type-mian"></div>
                </div>   
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img26.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img27.png" alt=""></div></router-link>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img28.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img29.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img30.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img31.png" alt=""></div></router-link>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img32.png" alt=""></div></router-link>
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img33.png" alt=""></div></router-link>
                </div>
                <div class="box">
                    <router-link to="/list"><div class="type-mian"><img src="../../assets/images/pic_class_img34.png" alt=""></div></router-link>
                    <div class="type-mian"></div>
                </div>
            
            </mt-tab-container-item>
        </mt-tab-container>
        <div class='down'></div>
    </div>
</template>

<script>
export default{
    data(){
      return{
        selected:'1'
      }
    }
  }

</script>
<style >
.type .mint-navbar .mint-tab-item.is-selected{
    border: none;
}
.type .mint-navbar .mint-tab-item.is-selected{
    color: #ff7830;
}
.type .mint-tab-item-label{
    font-size:15px;
}
.type .box {
  display: flex;
  justify-content: space-around;

}
.type .type-mian{
    box-sizing: border-box;
    float: left;
    margin-right: .29333rem;
    margin-bottom: .4rem;
    width: 11.52rem;
  
}
.type .type-mian img {
    display: block;
    width: 100%;
    height: 100%;
}
</style>
<style scoped>
  
  </style>